<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="5">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <div class="tree">
          <el-tree
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="getByTitle"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="19">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="关键字" >
              <el-input v-model="listQuery.title" />
          </el-form-item>
          <el-form-item label="搜索时间 ">
            <div class="block">
              <el-date-picker
                v-model="value"
                @change="change"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList(1)">搜索</el-button>
          </el-form-item>
        </el-form>
        <mytable ref="table" @getList="getList" :listQuery="listQuery">
          <el-table-column prop="title" align="center" label="标题"></el-table-column>
          <el-table-column prop="remark" align="center" label="内容"></el-table-column>
          <el-table-column prop="createTime" align="center" label="记录时间"></el-table-column>
        </mytable>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import apiQuartzLogs from "@/api/logManage/quartzLogs";
import mytable from "@/components/Table";
export default {
  name: "quartzLogs",
  components: { mytable },
  data() {
    return {
      data: [],
      filterText: "",
      listQuery: {
        title: "", //右侧title
        startTime: "", //开始时间
        endTime: "" //结束时间
      },
      value: [],
      defaultProps: {
        children: "children",
        label: "title"
      },
    };
  },
  computed: {},
  created() {
    this.getTitleList(this.filterText);
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    //过滤
    filterNode(value, data) {
    
      if (!value) return true;
      return data.title.indexOf(value) !== -1; 
    },
    //时间
    change(date) {
      if (date && date.length > 0) {
        this.listQuery.startTime = date[0];
        this.listQuery.endTime = date[1];
      } else {
        this.listQuery.startTime = "";
        this.listQuery.endTime = "";
      }
    },
    // 右侧数据
    getList(pageNo) {
      this.listQuery.pageNo = pageNo || this.listQuery.pageNo;
      apiQuartzLogs.getLogList(this.listQuery).then(res => {
        this.$refs.table.load(res.list, res.total);
      });
    },
    // 左侧标题
    getTitleList(filterText) {
      apiQuartzLogs.getAllTitle().then(res => {
        this.data = res.data.list;
      });
    },
    //标题事件
    getByTitle(data) {
      this.listQuery.title = data.title;
      this.getList();
    }
  }
};
</script>
<style scoped>
.tree {
  overflow: auto;
  height: 600px;
}
</style>